<template>
	<div class="hy-container">
		<HyTable
			:searchFields="searchFields"
			:searchConfig="searchConfig"
			:searchDefault="searchDefault"
			:tableConfig="tableConfig"
			:tableColumns="tableColumns"
			@sendSearchData="getSearchData"
			ref="hyTableRef"
			:buttonConfig="{
				span: 4,
				offset: 1,
			}"
		>
			<template #tableHeader>
				<el-button @click="handleExport" icon="download">导出</el-button>
			</template>
			<template #statusSlot="{ row }">
				<el-tag :class="setColor(row.processStatus)">{{ row.processStatusName }}</el-tag>
			</template>
			<template #operation>
				<el-table-column fixed="right" label="操作" width="130">
					<template #default="{ row }">
						<div class="flex items-center w-full justify-between">
							<el-button text type="primary" icon="View" @click="handleOperate(row)">详情</el-button>
							<el-button :disabled="!row.isReturn" class="mr-5" text type="primary" icon="View" @click="cancel(row)">撤回</el-button>
						</div>
					</template>
				</el-table-column>
			</template>
		</HyTable>
	</div>
</template>

<script lang="ts" setup>
import HyTable from '/@/components/HyTable/index.vue';
import { threeAuditListApi } from '/@/api/threeList/audit';
import { useDict } from '/@/hooks/dict';
import { useOperate } from './hooks/useOperate';
import other from '/@/utils/other';
const { process_status } = useDict('process_status');

const tableColumns = computed(() => {
	const { columns } = useOperate();
	let newColumns = [...columns, { prop: 'processStatus', label: '状态', slot: 'statusSlot', fixed: 'right', width: 160 }];
	return newColumns;
});
const tableConfig = computed(() => {
	return {
		request: threeAuditListApi,
	};
});
// 配置搜索
const searchFields = computed(() => {
	return {
		keyWords: {
			type: 'input',
			label: '关键字',
		},
		processStatus: {
			type: 'select',
			label: '状态',
			options: process_status.value,
		},
		timeArray: {
			type: 'date',
			span: 7,
			picker: 'datetimerange',
			label: '申报时间',
		},
	};
});
const searchConfig = computed(() => {
	return {
		labelWidth: '120px',
		type: 'search',
		title: '三张清单审核',
		show: true,
	};
});
const searchDefault = ref({});
//查看
const handleOperate = (row: any) => {
	const { processInstanceId = '', threeListId = '', processStatus = '' } = row;
	const { routerGo } = useOperate({ threeListId, processInstanceId, processStatus });
	routerGo('audit');
};
//撤回
const hyTableRef = ref();
const cancel = (row: any) => {
	const { handleApprovalCancel } = useOperate({ processInstanceId: row.processInstanceId });
	handleApprovalCancel(hyTableRef.value.getTableData);
};
//获取搜索数据
const exportParams: any = ref();
const getSearchData = (data: any) => {
	exportParams.value = data;
};
//下载
const handleExport = () => {
	other.downBlobFile('/manage/threeList/exportApproveInfo', { ...exportParams.value }, `三张清单审核列表.xlsx`);
};
const setColor = (type: number) => {
	switch (type) {
		case 1:
			return 'wait-tag';
		case 2:
			return 'agree-tag';
		case 3:
			return 'refuse-tag';
		default:
			break;
	}
};
</script>
<style scoped lang="scss"></style>
